<template>
  <div class="header-wrapper">
    <div class="header-body">
      <el-row>
        <el-col :xs="5" :sm="5" :md="5" :lg="5" :xl="5">
          <van-logo />
        </el-col>
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <el-menu
            :defalut-active="activeIndex"
            mode="horizontal"
            background-color="#2f3447"
            text-color="#fff"
            active-text-color="#ffd04b"
          >
            <van-menu
              v-for="route in menu"
              :key="route.path"
              :full-path="handlePath(route.path)"
              :item="route"
            ></van-menu>
          </el-menu>
        </el-col>
        <el-col :xs="7" :sm="7" :md="7" :lg="7" :xl="7"> </el-col>
      </el-row>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive } from 'vue'
import { resloveMenu, isExternal } from '@/utils/route'
import path from 'path'
import VanLogo from '@/components/VanLogo/index.vue'

export default defineComponent({
  name: 'VanHead',
  components: {
    VanLogo
  },
  beforeCreate() {
    this.setupMenu()
  },
  setup() {
    const activeIndex = ref('/home')
    const menu: any[] = reactive([])
    const setupMenu = function() {
      resloveMenu()
        .then(res => {
          res.forEach(item => menu.push(item))
        })
        .catch(err => {
          console.log(err)
        })
    }
    const handlePath = function(pathStr: string) {
      if (isExternal(pathStr)) {
        return pathStr
      }
      return path.resolve('/', pathStr)
    }
    return {
      activeIndex,
      menu,
      handlePath,
      setupMenu
    }
  }
})
</script>
<style lang="scss" scoped>
.header-wrapper {
  // display: flex;
  // align-items: center;
  // justify-content: flex-end;
  height: $base-header-height;
  background: $base-menu-background;

  .header-body {
    background: $base-menu-background;

    ::v-deep {
      .el-menu {
        &.el-menu--horizontal {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          height: $base-header-height;
          border-bottom: 0 solid transparent !important;

          .el-menu-item,
          .el-submenu__title {
            padding: 0 15px;
          }

          @media only screen and (max-width: 767px) {
            .el-menu-item,
            .el-submenu__title {
              padding: 0 8px;
            }

            li:nth-child(4),
            li:nth-child(5) {
              display: none !important;
            }
          }

          > .el-menu-item {
            height: $base-header-height;
            line-height: $base-header-height;
          }

          > .el-submenu {
            .el-submenu__title {
              height: $base-header-height;
              line-height: $base-header-height;
            }
          }
        }

        svg {
          width: 1rem;
          margin-right: 3px;
        }

        &--horizontal {
          .el-menu {
            .el-menu-item,
            .el-submenu__title {
              height: $base-menu-item-height;
              line-height: $base-menu-item-height;
            }
          }

          .el-submenu,
          .el-menu-item {
            &.is-active {
              background-color: $base-color-blue !important;
              border-bottom: 0 solid transparent !important;

              .el-submenu__title {
                border-bottom: 0 solid transparent !important;
              }
            }
          }

          > .el-menu-item {
            .el-tag {
              margin-top: calc(#{$base-header-height} / 2 - 7.5px);
              margin-left: 5px;
            }

            @media only screen and (max-width: 1199px) {
              .el-tag {
                display: none;
              }
            }

            &.is-active {
              background-color: transparent !important;
              border-bottom: 3px solid $base-color-blue !important;
            }
          }
        }
      }
    }
  }
}
</style>
